<template>
  <div class="shop_list" @scroll="scrolll($event)">
    <div style="background: rgb(245, 246, 247);">
      <van-list 
      class="classifyList clearfix"
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      finished-text="没有更多了"
      >
        <li v-for="item in data" :key="item.commonId" :shopId="item.commonId">
          <a>
            <div class="goods-pic">
              <img
                :src="item.imageSrc"
                alt
              />
              <!---->
            </div>
            <div class="goods-name">{{item.goodsName}}</div>
            <dl class="goods-price">
              <span>
                <img src="https://api.10street.cn/wap/images/oneBuy/priceIcon.png" alt="">
                <!---->
                ￥
                <i>{{item.webPrice2}}</i>
              </span>
              <em>原价 ￥{{item.webPrice0}}</em>
              <!---->
            </dl>
          </a>
        </li>
      </van-list>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Tab, Tabs} from 'vant';
import axios from 'axios'
import BScroll from 'better-scroll'
import { List } from 'vant';

Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {

  data(){
    return{
      title:"",
      data:[],
      active:0,
      loading: false,
      finished: false,
      pageNo:1,
      commId:21426,
      shop_img:[]
    }
  },
  mounted(){
    this.ajax()

  },
  methods:{
    ajax(){
      axios('https://api.10street.cn/api/goods/common/categoryId3' , {
        method:"POST",
        params:{
          commonId: this.commId,
          pageNo: this.pageNo,
          pageSize: 20
        }
      })
      .then((data)=>{
        this.loading = false
        this.data = [
          ...this.data,
          ...data.data.datas.list
        ]
        if(data.data.datas.list[0] == undefined){
          this.finished = true
        }
      })
      .catch((err)=>{
        this.loading = false
        console.log(err)
      })
    },
    onLoad(){
      this.pageNo++
      this.ajax()
    }
  }
}
</script>

<style lang='stylus' scoped>
li
  list-style none
.classifyFloor 
    background: #F5F6F7
    padding-top: 0.11rem
    margin: 0 auto
    position: relative
    overflow: hidden
    z-index: 1
    display flex
    overflow auto
    width 100%
    .item-text-list
        display flex
        .select
                div
                    color: #FF4A42
                    font-size: 0.17rem
                p
                    background: #FF4A42;
                    color: #fff;
                    border-radius: 0.088rem;
        .item
            width 0.7rem
            position relative
            div
                height: 0.264rem
                line-height: 0.264rem
                text-align center
            p
                text-align center
                font-size: 0.1rem;
                height: 0.196rem;
                line-height: 0.187rem;
                width: 86%;
                margin: auto;
                padding: 0 0.5%;
            i
                display: inline-block;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                width: 0.022px;
                height: 0.22rem
                background: #E4E4E4;


.classifyList 
    margin: 0 0.1rem
    padding: 0.15rem 0
    overflow hidden
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li
        width: 49%
        background: #fff
        border-radius: 0.077rem
        float: left
        margin-bottom: 0.11rem
        overflow: hidden
        padding-bottom: 0.11rem
        .goods-name
            color: #333333
            font-size: 0.13rem
            display: -webkit-box
            -webkit-box-orient: vertical
            -webkit-line-clamp: 2
            overflow: hidden
            line-height: 0.187rem
            margin: 0.055rem 0.1rem 0
        .goods-pic
            width: 100%
            position: relative
            img
                width: 100%
            .save
                border-radius: 0.033rem;
                border: 1px solid #FF4A42;
                background: #fff;
                color: #FF4A42;
                font-size: 0.11rem;
                position: absolute;
                top: 0.11rem;
                left: 0.11rem;
                padding: 0 0.066rem;
                height: 0.176rem;
                line-height: 0.187rem;
        .goods-price
            margin: 0 0.1rem
            line-height: 0.22rem
            overflow: hidden
            em
                color: #999999;
                font-size: 0.11rem;
                margin-left: 0.077rem;
            span
               
                color: #FF4A42
                font-size: 0.088rem
                img
                    width: 0.1rem;
                    margin: -0.022rem 0.044rem 0 0;
                i
                    font-size: 0.15rem;


</style>